<template>
  <div class="user bg-f2">
    <div class="bg-f2 bg-fff">
      <ul class="headTitle">
        <li>
          <!-- <div class="imgBox"></div> -->
          <svg class="iconfont imgBox" aria-hidden="true">
            <use xlink:href="#el-icon-mypersonal_center" style="font-size: 50px" />
          </svg>
        </li>
        <li>
          <span class="userSize">个人中心</span>
        </li>
        <li>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <!-- <span class="userSize2">{{ title === '个人中心' ? '安全设置' : title }}</span> -->
          <span class="userSize2">安全设置</span>
        </li>
      </ul>
      <el-tabs v-model="title" @tab-click="handleClick">
        <el-tab-pane label="安全设置" :name="title">
          <ul class="tabItem">
            <li>
              <div>登录密码</div>
              <div><i class="el-icon-success myIcon mySuccess"></i><span>已设置</span></div>
              <div>密码长度6-14位，须包含数字、字母、符号至少2种或以上元素</div>
              <div class="btnBox">
                <el-button size="small" plain type="primary" @click="MMGengai" v-preventReClick>更改</el-button>
              </div>
            </li>
            <li>
              <div>绑定手机</div>
              <div>
                <i :class="['myIcon', phoneZT === 0 ? 'myWarning el-icon-warning' : 'el-icon-success mySuccess']"></i><span>{{ phoneZT === 0 ? '未验证' : '已验证' }}</span>
              </div>
              <div>{{ phone }}</div>
              <!-- <p class="phoneText" v-show="phoneZT === 0 ? true : false">
                <i class="el-icon-warning"></i>
                手机号码未验证，请立即验证
              </p> -->
              <div class="btnBox">
                <el-button size="small" plain type="primary" @click="phoneGengai(phoneZT)" v-preventReClick>{{ phoneZT === 0 ? '验证' : '修改' }}</el-button>
              </div>
            </li>
            <li>
              <div>设置邮箱</div>
              <!-- yxzt 0-未验证 1-已验证 -->
              <div v-if="mailbox === ''"><i class="myIcon myWarning el-icon-warning"></i><span>未设置</span></div>
              <div v-else>
                <i :class="['myIcon', yxzt === 0 ? 'myWarning el-icon-warning' : 'el-icon-success mySuccess']"></i><span>{{ yxzt === 0 ? '未验证' : '已验证' }}</span>
              </div>
              <div>{{ mailbox }}</div>
              <div class="btnBox">
                <el-button v-if="mailbox === ''" size="small" plain type="primary" @click="mailGengai(2)" v-preventReClick>设置</el-button>
                <el-button v-else size="small" plain type="primary" @click="mailGengai(yxzt)" v-preventReClick>{{ yxzt === 0 ? '验证' : '更改' }}</el-button>
              </div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { getUrl, setUrl } from '@/utils/getUrl.js'
import { pinT } from '@/utils/allUrl.js'
export default {
  data: function () {
    return {
      title: '',
      mailbox: '', // 邮箱
      phone: '', // 手机
      phoneZT: '', // 联系人状态
      email: '',
      user: '',
      yxzt: '',
      mailType: ['未设置', '未验证', '已验证'],
      mailBtnType: ['设置', '更改', '验证'],
    }
  },
  created: function () {
    this.title = this.$route.params.content
    // 获取用户信息
    this.user = JSON.parse(getUrl('userconter'))
    this.getXunJianRen()
    // const { yx, lxdh, lxdhzt } = JSON.parse(getUrl('userconter'))
    // console.log(JSON.parse(getUrl('userconter')))
    // // 邮箱加密显示
    // this.mailbox = yx
    // setUrl('email_text', yx)
    // if (yx !== '') {
    //   var ss = yx.split('@')[0].length
    //   var mailbox = yx.replace(yx.substring(ss / 2, yx.lastIndexOf('@')), '*****')
    //   this.mailbox = mailbox
    // }
    // // 手机号加密显示
    // this.phone = lxdh
    // if (lxdh !== '') {
    //   var phone = '' + lxdh
    //   var reg = /(\d{3})\d{4}(\d{4})/ // 正则表达式
    //   var phone1 = phone.replace(reg, '$1****$2')
    //   this.phone = phone1
    // }
    // this.phoneZT = lxdhzt
  },
  methods: {
    // 获取当前页面信息
    async getXunJianRen() {
      const params = new URLSearchParams()
      params.append('ID', this.user.id)
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`, params)
      if (res.code !== '0000') {
        this.mailbox = ''
        this.phone = ''
        this.phoneZT = ''
        return
      }
      const { yx, lxdh, lxdhzt, yxzt } = res.data.list[0]
      // 邮箱加密显示
      this.mailbox = yx
      setUrl('email_text', yx)
      if (yx !== '') {
        var ss = yx.split('@')[0].length
        var mailbox = yx.replace(yx.substring(ss / 2, yx.lastIndexOf('@')), '*****')
        this.mailbox = mailbox
      }
      // 手机号加密显示
      this.phone = lxdh
      if (lxdh !== '') {
        var phone = '' + lxdh
        var reg = /(\d{3})\d{4}(\d{4})/ // 正则表达式
        var phone1 = phone.replace(reg, '$1****$2')
        this.phone = phone1
      }
      this.phoneZT = lxdhzt
      this.yxzt = yxzt // 邮箱状态
    },
    handleClick() {},
    // 邮箱修改
    mailGengai(yxzt) {
      var type = yxzt
      this.$router.push({
        name: 'passwordJJ', // 路由
        query: {
          // 传递参数
          content: 'mailGengai',
          type: type,
        },
      })
    },
    // 手机修改/绑定
    phoneGengai(e) {
      if (e === 1) {
        this.$router.push({
          name: 'passwordJJ', // 路由
          query: {
            // 传递参数
            content: 'phoneGengai',
          },
        })
      } else {
        this.$router.push({
          name: 'passwordJJ', // 路由
          query: {
            // 传递参数
            content: 'phoneRen',
            phone: this.phone,
          },
        })
      }
    },
    MMGengai: function () {
      this.$router.push({
        name: 'passwordJJ', // 路由
        query: {
          // 传递参数
          content: 'MMGengai',
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.user {
  margin-top: 20px;
  .headTitle {
    display: flex;
    align-items: center;
    height: 30px;
    > li:first-child {
      margin: 0;
    }
    > li {
      margin-left: 10px;
      .imgBox {
        width: 40px;
        height: 35px;
      }
      .userSize {
        color: #333333;
        font-size: 16px;
        font-weight: 600;
      }
      .el-icon-arrow-right {
        font-size: 15px;
      }
      .userSize2 {
        color: #7f7f7f;
        font-weight: 500;
        font-size: 16px;
      }
    }
  }
  .tabItem {
    padding: 30px 0;
    width: 100%;
    > li:first-child {
      border-top: 1px solid rgba(234, 234, 234, 1);
    }
    .myIcon {
      font-size: 16px;
      // vertical-align: text-bottom;
      vertical-align: middle;
      padding-right: 5px;
    }
    .myWarning {
      color: #e28b02;
    }
    .mySuccess {
      color: #67c23a;
    }
    > li {
      margin: 0 auto;
      width: 88%;
      height: 66px;
      line-height: 66px;
      border-bottom: 1px solid rgba(234, 234, 234, 1);
      color: #666;
      > div {
        float: left;
      }
      > div:nth-child(1) {
        margin: 0;
        color: #333;
      }
      > div:nth-child(2) {
        margin-left: 5%;
      }
      > div:nth-child(3) {
        margin-left: 20%;
      }
      > .btnBox {
        float: right;
        margin-right: 10%;
      }
      .phoneText {
        float: left;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        background-color: #fffbe6;
        color: #e28b02;
        border: 1px solid #f5e3bf;
        margin: 12px 20px;
        .el-icon-warning {
          font-size: 15px;
        }
      }
    }
  }
}
</style>
